import React from "react"
import "./style.less"
import ReactSwipe from "react-swipe"

export default class Carousel extends React.Component{
    constructor(){
        super();
        this.state = {
            subscript: 0
        }
    }

    render (){
        let banners = this.props.banners;
        const opt = {
            auto: 6000,
            callback:function(index,ele){
              this.setState({
                subscript:index
              })
            }.bind(this)
        }
        return (
            <div className="carousel-container">
                <ReactSwipe swipeOptions={opt}>
                {
                    banners.map((element,index) => {
                    return (
                        <div key={index} className="carousel-item">
                            <img src={element} alt="提示" />
                        </div>
                    )
                    })
                }
                </ReactSwipe>
                <ul className="carousel-dot">
                    {
                        banners.map((ele,index) => {
                            return <li className={index === this.state.subscript?"selected":""} key={index}></li>
                        })
                    }
                </ul>
            </div>
        )
    }
}

